<p-dialog header="设置Field"
  [(visible)]="visible"
  [modal]="true"
  [draggable]="true"
  [resizable]="false"
  [closable]="true"
  [dismissableMask]="true"
  [style]="{ width: '40rem' }">
  <div class="flex flex-column px-1 py-5 gap-4"
    *ngIf="field">

    <div class="inline-flex flex-column gap-2">
      <label for="name"
        class="text-primary-50 font-semibold">Name</label>
      <input pInputText
        id="name"
        [(ngModel)]="field.Name"
        class="bg-white-alpha-20 border-none p-1 text-primary-50 p-inputtext-sm"
        [required]="true" />
    </div>
    <div class="inline-flex flex-column gap-2">
      <label for="Description"
        class="text-primary-50 font-semibold">Description</label>
      <input pInputText
        id="Description"
        [(ngModel)]="field.Description"
        class="bg-white-alpha-20 border-none p-1 text-primary-50 p-inputtext-sm" />
    </div>
    <div class="inline-flex flex-column gap-2">
      <label for="address"
        class="text-primary-50 font-semibold">Address</label>
      <input pInputText
        id="address"
        [(ngModel)]="field.Address"
        class="bg-white-alpha-20 border-none p-1 text-primary-50 p-inputtext-sm"
        [required]="true" />
    </div>

    <div class="inline-flex flex-column gap-2">
      <label for="type"
        class="text-primary-50 font-semibold">Type</label>
      <select id="type"
        class="bg-white-alpha-20 border-none p-1 text-primary-50 p-inputtext-sm"
        [(ngModel)]="field.Type">
        <option *ngFor="let type of types"
          class="bg-black-alpha-50 border-none p-1 text-primary-50 p-inputtext-sm"
          [value]="type">{{ type }}</option>
      </select>
    </div>
    <div class="inline-flex flex-column gap-2">
      <label for="WaitValue"
        class="text-primary-50 font-semibold">WaitValue</label>
      <p-inputNumber inputId="WaitValue"
        [(ngModel)]="field.WaitValue"
        [showClear]="true"
        styleClass="p-inputtext-sm w-full"> </p-inputNumber>
    </div>

  </div>
  <ng-template pTemplate="footer">
    <p-button icon="pi pi-check"
      (click)="onEditConfirm()"
      styleClass="p-button-sm"
      label="确定"
      pAutoFocus
      [autofocus]="true"></p-button>
    <p-button icon="pi pi-times"
      (click)="onEditCancel()"
      severity="secondary"
      styleClass="p-button-sm"
      label="取消"></p-button>
  </ng-template>
</p-dialog>